<template>
  <a-tabs type="card" default-active-key="1" size="small">
    <a-tab-pane key="1" tab="样式">
      <a-form :model="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }" style="margin-left: 5px">
        <a-form-item label="线形" :wrapper-col="{ span: 10 }">
          <a-select :value="lineType" @change="handleLine">
            <a-select-option :value="1">实线</a-select-option>
            <a-select-option :value="2">虚线</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="箭头" :wrapper-col="{ span: 10 }">
          <a-select :value="arrowType" @change="handleArrow">
            <a-select-option :value="1">正向</a-select-option>
            <a-select-option :value="2">逆向</a-select-option>
            <a-select-option :value="3">双向</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="边框">
          <a-popover
              :visible="strokeColorVisible"
              placement="leftTop"
              trigger="click"
              title="修改边框色"
              @visibleChange="visible => (strokeColorVisible = visible)"
          >
            <template #content>
              <a-row style="margin-bottom: 10px">
              <Sketch :modelValue="colors" @update:modelValue="updateBodyStroke" :presetColors="presetColors" />
              </a-row>
              <a-row>
                <a-col :span="17">
                  <a-button @click="strokeColorVisible = false">取消</a-button>
                </a-col>
                <a-col :span="7">
                  <a-button type="primary" @click="handleBodyStroke">确定</a-button>
                </a-col>
              </a-row>
            </template>
            <div
                class="color-container"
                @click="strokeColorVisible = true"
            >
              <div
                  class="edit-color"
                  :style="{ backgroundColor: curEdge.attrs?.line?.stroke || '' }"
              ></div>
            </div>
          </a-popover>
        </a-form-item>
        <a-form-item label="文本">
          <a-input :value="curLabel" @change="handleLabel" />
        </a-form-item>
      </a-form>
    </a-tab-pane>
    <!-- <a-tab-pane key="2" tab="参数"> -->
    <!--   Content of Tab Pane 2 -->
    <!-- </a-tab-pane> -->
  </a-tabs>
</template>

<script setup>
import { ref, watch, reactive } from 'vue';
import { Edge } from '@antv/x6';
import { Sketch } from '@ckpack/vue-color';

import {
  Tabs as ATabs,
  TabPane as ATabPane,
  Form as AForm,
  FormItem as AFormItem,
  Select as ASelect,
  SelectOption as ASelectOption,
  Popover as APopover,
  Row as ARow,
  Col as ACol,
  Button as AButton,
  Input as AInput,
} from 'ant-design-vue';

// 定义 props
const props = defineProps({
  edge: {
    type: Edge,
    required: true,
  },
});

// 定义 emits
const emit = defineEmits(['updateData']);

// 响应式状态
const colors = ref({ r: 255, g: 0, b: 0 });
const presetColors = ref([
  '#f00',
  '#00ff00',
  '#00ff0055',
  'rgb(201, 76, 76)',
  'rgba(0,0,255,1)',
  'hsl(89, 43%, 51%)',
  'hsla(89, 43%, 51%, 0.6)',
]);
const strokeColorVisible = ref(false);
const curBodyStroke = ref('');
const curEdge = ref(props.edge);
const curLabel = ref('');
const lineType = ref(1); // 默认实线
const arrowType = ref(1); // 默认正向箭头
const form = reactive({}); // 表单数据（根据需要调整）

// 初始化 curLabel
watch(
    () => props.edge,
    (newValue) => {
      curEdge.value = newValue;
      curLabel.value =
          newValue.labels && newValue.labels.length
              ? newValue.labels[0].attrs.text.text
              : '';
    },
    { immediate: true }
);

// 监听 curEdge 变化，触发 updateData
watch(curEdge, (newValue) => {
  emit('updateData', newValue);
}, { deep: true });

// 更新选色器颜色
const updateBodyStroke = (v) => {
  curBodyStroke.value = v.hex;
};

// 更新边框色
const handleBodyStroke = () => {
  curEdge.value.setAttrs({
    line: {
      stroke: curBodyStroke.value,
    },
  });
  strokeColorVisible.value = false;
};

// 更新线的虚实
const handleLine = (value) => {
  lineType.value = value;
  if (value === 2) {
    curEdge.value.setAttrs({
      line: {
        strokeDasharray: '5,5',
      },
    });
  } else {
    curEdge.value.removeAttrByPath('line/strokeDasharray');
  }
};

// 更新箭头
const handleArrow = (value) => {
  arrowType.value = value;
  switch (value) {
    case 1: // 正向箭头
      curEdge.value.setAttrs({
        line: {
          targetMarker: {
            name: 'block',
            width: 12,
            height: 8,
          },
        },
      });
      curEdge.value.removeAttrByPath('line/sourceMarker');
      break;
    case 2: // 逆向箭头
      curEdge.value.setAttrs({
        line: {
          sourceMarker: {
            name: 'block',
            width: 12,
            height: 8,
          },
        },
      });
      curEdge.value.removeAttrByPath('line/targetMarker');
      break;
    case 3: // 双向箭头
      curEdge.value.setAttrs({
        line: {
          targetMarker: {
            name: 'block',
            width: 12,
            height: 8,
          },
          sourceMarker: {
            name: 'block',
            width: 12,
            height: 8,
          },
        },
      });
      break;
  }
};

// 更新文本标签
const handleLabel = (e) => {
  const value = e.target.value;
  curEdge.value.removeLabelAt(0);
  curEdge.value.appendLabel({
    attrs: {
      text: {
        text: value,
      },
    },
  });
  curLabel.value = value;
};
</script>

<style scoped>
.color-container {
  margin-top: 8px;
  width: 24px;
  height: 24px;
  padding: 4px;
  border: 1px solid #dfe3e8;
  border-radius: 2px;
}

.edit-color {
  cursor: pointer;
  height: 100%;
}
</style>
